<template>
  <div class>
    <div style="padding:30px 30px 0px 30px;">
      <el-row>
        <el-col :span="6">
          姓名：
          <el-input
            v-model="sname"
            placeholder=""
            style="width: 120px;"
          ></el-input>
        </el-col>
        <el-col :span="6">
          性别：
          <el-select v-model="sex" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="initdata">查询</el-button>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="isadd()">添加记录</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="margin:20px;">
      <el-table :data="tableData" border stripe>
        <!-- <el-table-column prop="id" label="id" align="center"></el-table-column>
        <el-table-column prop="id" label="id" align="center"></el-table-column> -->
        <!-- <el-table-column
          prop="hrid"
          label="hrid"
          align="center"
        ></el-table-column> -->
        <el-table-column
          prop="indate"
          label="申请时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="idcard"
          label="身份证号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="communityid"
          label="社区id"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary" @click="delrecord(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="text-align:center;">
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum"
        background
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="isupdate ? '更新' : '添加'"
      :visible.sync="isadddia"
      center
      width="50%"
      @close="isadddia = false"
    >
      <el-form :model="refform" ref="refform" label-width="80px">
        <el-form-item label="code">
          <el-input v-model="refform.code"></el-input>
        </el-form-item>
        <el-form-item label="name">
          <el-input v-model="refform.name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer">
        <el-button @click="isadddia = false">取 消</el-button>
        <el-button
          type="primary"
          @click="isupdate ? updaterecord() : addrecord()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="社区二维码"
      :visible.sync="isshowqr"
      width="30%"
      center
      @close="isshowqr = false"
    >
      <div style="text-align:center;">
        <qriously :value="qrdata" :size="300" />
      </div>
      <span slot="footer">
        <el-button @click="isshowqr = false">取 消</el-button>
        <el-button type="primary" @click="isshowqr = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import accessrecordsService from "@/api/accessrecordsService";

export default {
  components: {},
  data() {
    return {
      sex: '',
      options: [
        {
          value: "男",
          label: "男"
        },
        {
          value: "女",
          label: "女"
        },
        {
          value: "",
          label: "所有"
        }
      ],
      sname: "",
      pageSize: 5,
      currentPage: 1,
      totalNum: 0,
      isupdate: false,
      isshowqr: false,
      qrdata: "",
      tableData: [],
      isadddia: false,
      refform: {
        id: 19,
        hrid: 37,
        indate: "2020-02-25T07:39:18.000+0000",
        name: "张三",
        idcard: "123456789012345678",
        sex: "男",
        phone: "12345678901",
        communityid: 100
      }
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initdata();
  },
  methods: {
    sizeChange(val) {
      this.pageSize = val;

      this.initdata();
    },
    currentChange(val) {
      this.currentPage = val;
      this.initdata();
    },

    delrecord(row) {
      accessrecordsService.del(row).then(res => {
        console.log(res);
        this.$message.success("删除成功")
        this.initdata();
      });
    },
    updaterecord() {
      accessrecordsService.update(this.refform).then(res => {
        console.log(res);
        this.isadddia = false;
        this.initdata();
      });
    },
    initdata() {
      accessrecordsService
        .list({
          current: this.currentPage,
          size: this.pageSize,
          name: this.sname,
          sex: this.sex
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.records;
          this.totalNum = res.data.total;
        });
    },
    isadd() {
      this.isadddia = true;
      this.isupdate = false;
      this.refform.code = "";
      this.refform.name = "";
    },
    addrecord() {
      // this.isadddia = true
      accessrecordsService.insert(this.refform).then(res => {
        console.log(res);
        if (res.code == 0) {
          this.isadddia = false;
          this.initdata();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped></style>
